<template>
	<view class="content">
		<view class="book-con">
			<!-- #ifdef MP-ALIPAY -->
			<view style="margin: 0 auto;width: 588rpx;margin-bottom: 20rpx;" @click="goOCR">
				<view style="margin-bottom: 10rpx;color: #999999;">
					请扫描身份证人像面(可识别身份证信息)
				</view>
				<image src="../../static/positivea.png" style="width: 588rpx;height: 352.8rpx;display: block;">
				</image>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="margin: 0 auto;width: 588rpx;margin-bottom: 20rpx;">
				<view style="margin-bottom: 10rpx;color: #999999;">
					请上传身份证人像面(可识别身份证信息)
				</view>
				<u-upload @afterRead="afterRead" :multiple="false" :maxCount="1">
					<image v-if="imgUrl" :src="imgUrl" style="width: 588rpx;height: 352.8rpx;display: block;"></image>
					<image v-else :src="$IMG_URL+'positive.png'" style="width: 588rpx;height: 352.8rpx;display: block;">
					</image>
				</u-upload>
			</view>
			<!-- #endif -->
			<view class="flex-row">
				<view>就诊人姓名：</view>
				<view class="book-input">
					<u-input placeholder="请输入姓名" border="none" inputAlign="right" v-model="name"></u-input>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<!-- <view class="flex-row" @click="showSex = true">
				<view>就诊人性别：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="sex" style="text-align: right;">{{sex}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择性别</view>
				</view>
			</view> -->
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>证件号码：</view>
				<view class="book-input">
					<!-- #ifdef H5 -->
					<u-input type="idcard" placeholder="请输入证件号码" border="none" inputAlign="right"
						v-model="card"></u-input>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u-input placeholder="请输入证件号码" border="none" inputAlign="right" v-model="card"></u-input>
					<!-- #endif -->
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>手机号码：</view>
				<view class="book-input">
					<!-- #ifdef H5 -->
					<u-input type="number" placeholder="请输入手机号码" border="none" inputAlign="right"
						v-model="phone"></u-input>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u-input placeholder="请输入手机号码" border="none" inputAlign="right" v-model="phone"></u-input>
					<!-- #endif -->

				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<!-- <view class="flex-row" @click="showTime = true">
				<view>出生日期：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="birth" style="text-align: right;">{{birth}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择日期</view>
				</view>
			</view> -->
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row" @click="visible = true">
				<view>所属地区：</view>
				<view class="book-input" style="color: #303133;font-size: 15px;">
					<view v-if="area" style="text-align: right;">{{area}}</view>
					<view v-else style="color: rgb(192, 196, 204);text-align: right;">请选择居住地区</view>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>详细地址：</view>
				<view class="book-input">
					<u-input placeholder="请输入居住详细地址" border="none" inputAlign="right" v-model="address"></u-input>
				</view>
			</view>
		</view>
		<view class="book-title">
			温馨提示：一键绑卡仅限制于门诊患者
		</view>
		<view class="book-but">
			<u-button type="primary" text="一键绑卡" @click="submitForm"></u-button>

		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-datetime-picker :show="showTime" v-model="birthTime" mode="date" :minDate="0" @cancel="showTime=false"
			@confirm="confirm"></u-datetime-picker>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="true" @confirm="selectArea"
			@cancel="visible=false" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	import {
		adduserApi
	} from "@/api/user"
	import {
		baseUrl
	} from "@/api/service"

	export default {
		data() {
			return {

				imgUrl: "",
				name: '',
				sex: '',
				card: '',
				phone: '',
				birth: '',
				area: '',
				address: '',
				birthTime: Number(new Date()),
				showSex: false,
				showTime: false,
				visible: false,
				// defaultValue: '420103',
				defaultValue: ['河南省', '商丘市', '梁园区'],
				column: 3,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},

				],
			}
		},
		components: {
			cityPicker
		},

		methods: {
			goOCR() {
				uni.$on('selectFile', this.upData)
				uni.navigateTo({
					url: '/pages/ocr/ocr'
				})
			},
			upData(val) {
				console.log(33, val);
				this.name = val.name
				this.card = val.num
			},
			sexSelect(e) {
				console.log(e);
				this.sex = e.name
			},
			confirm(e) {
				this.birth = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showTime = false
			},
			selectArea(val) {
				console.log(val)
				this.area = `${val.provinceName}/${val.cityName}/${val.areaName}`
				this.submitArea = val.name
				this.visible = false
			},
			async afterRead(event) {
				console.log(event);
				this.imgUrl = event.file.url
				this.uploadFilePromise(event.file.url)
			},
			uploadFilePromise(file) {
				uni.showLoading({
					title: '识别中...'
				});
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + '/business/user/ocr',
						filePath: file,
						name: 'file',
						success: (res) => {
							console.log(res);
							if (res.data) {
								const idCard = JSON.parse(res.data)
								console.log(idCard);
								if (idCard.code === 200) {
									if (idCard.data.errcode === 0) {
										this.name = idCard.data.name
										this.card = idCard.data.id
									} else {
										uni.showToast({
											title: '请上传身份证人像面',
											icon: 'none',

										})
										this.imgUrl = ''
									}

								}
							}

							uni.hideLoading()
						}
					});
				})
			},
			async submitForm() {
				// console.log(this.card.toUpperCase());
				// return
				uni.showLoading()
				try {
					let userInfo = uni.getStorageSync('userInfo')
					const res = await adduserApi({
						userCard: this.card.toUpperCase(),
						patientName: this.name,
						patientTel: this.phone,
						address: this.submitArea + this.address,
						userId: userInfo.id,
						userCardType: 2,
						patientType: 1
					})
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/result/result'
					})
				} catch (e) {
					uni.hideLoading()
				}

			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
		/* background: red; */
	}

	.book-con {
		background-color: #FFFFFF;
		padding: 0 31rpx;
		box-sizing: border-box;
		padding-top: 20px;
	}

	.flex-row {
		display: flex;
		align-items: center;
		padding: 21rpx 0;
	}

	.book-input {
		margin-left: auto;
		width: 420rpx;

	}

	.book-title {
		color: #999999;
		font-size: 23rpx;
		margin-left: 31rpx;
		margin-top: 23rpx;
	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 92rpx;
	}
</style>